@import '../variable.scss';
@import '../mixins.scss';

.cart__list {
  @include background;
  header {
    padding: .11rem 0;
    text-align: center;
    font-size: .16rem;
    color: $content-fontcolor;
    background-color: #FFF;
  }
  .wrapper {
    overflow-y: scroll;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: .6rem;
    top: .4rem;
  }
}

.product {
  margin: .16rem .18rem .2rem .18rem;
  background: #FFF;
  &__title {
    padding: .16rem;
    font-size: .16rem;
    color: $content-fontcolor;
  }
  &__list {
    background: #FFF;
  }
  &__item {
    display: flex;
    position: relative;
    padding: 0 .16rem .16rem .16rem;
    &__img {
      width: .46rem;
      height: .46rem;
      margin-right: .16rem;
    }
    &__detail {
      flex: 1;
    }
    &__title {
      line-height: .2rem;
      margin: 0;
      font-size: .14rem;
      color: $content-fontcolor;
      @include ellipsis;
    }
    &__price {
      display: flex;
      margin: .06rem 0 0 0;
      line-height: .2rem;
      font-size: .14rem;
      color: $highlight-fontColor;
    }
    &__total {
      flex: 1;
      text-align: right;
      color: #000;
    }
    &__yen {
      font-size: .12rem;
    }
  }
}
